<!-- 发起离职开具证明 -->
<template>
  <a-modal
    width="80%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmount-on-close
    :mask-closable="false"
  >
    <template #title>
      <div>离职证明</div>
    </template>
    <div>
      <a-form :model="formData" auto-label-width>
        <a-form-item field="" label="申请对象" show-colon>
          <a-input
            disabled
            style="width: 200px"
            v-model="formData.name"
          ></a-input>
        </a-form-item>
        <a-form-item field="" label="证明模板" show-colon>
          <a-select
            style="width: 200px"
            @change="selectTemplate"
            v-model="formData.template"
          >
            <a-option
              v-for="item in templateList"
              :value="item.id"
              :key="item.id"
            >
              {{ item.name }}
            </a-option>
          </a-select>
          <a-button type="outline" style="margin-left: 20px" @click="add"
            >新增模板</a-button
          >
        </a-form-item>
        <a-form-item field="" label="证明预览" show-colon> </a-form-item>
      </a-form>
      <RichTextNew
        v-model:content="currTemplate"
        ref="rich"
        disabled
        hide-tool-bar
      ></RichTextNew>
    </div>
    <template #footer>
      <a-space>
        <a-button type="outline">打印</a-button>
        <a-button type="outline">下载</a-button>
        <a-button type="primary">发送至员工端</a-button>
        <a-button type="primary">发送至邮箱</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import {
  GetInternshipProofTemplate,
  ChangeInternshipProofTemplate
} from '@/apis/management/human/baseSetting/certificateSetting';
import { GetBusinessModalData } from '@/apis/controltotal';
import { changeControlData } from '@/utils/control';

const router = useRouter();

const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data: any; // 传进来的数据
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'intershipProofChange']);

const formData = reactive({
  name: '',
  template: undefined,
  text: ''
});

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit('update:visible', visible);
  }
});

let templateList = ref(); // 获取下拉框数据
const controlList: any = ref(); // 储存控件总集的数据
const getData = async () => {
  try {
    const { content }: any = await GetInternshipProofTemplate({
      pageNumber: 0,
      pageSize: -1,
      type: 2
    });
    templateList.value = content.filter((item: any) => item.enable === 1);
    formData.template = templateList.value.find(
      (item: any) => item.isShowDefault === 1
    )?.id;
    // 获取控件总集数据
    const { funcCtlInfos }: any = await GetBusinessModalData({
      funcCode: 'SER_FUNC9B158E4240DE49979E62895D0AEF9080'
    });

    const { text } = await ChangeInternshipProofTemplate({
      id: formData.template as number,
      ownerId: props.data.id
    });

    currTemplate.value = text;
  } catch (error: unknown) {
    console.log(error);
  }
};

watch(
  () => modalVisible.value,
  (newVal: boolean) => {
    if (newVal) {
      getData();
      formData.name = props.data.name;
    }
  }
);

// 新增模板
const add = () => {
  router.push({
    name: 'InternshipProofTemplateDetail'
  });
};

let currTemplate = ref(); // 储存当前选择的模板

// 选择模板
const selectTemplate = async (id: number) => {
  const { text } = await ChangeInternshipProofTemplate({
    id,
    ownerId: props.data.id
  });
  currTemplate.value = text;

  // 处理富文本数据
  // controlList.value.forEach((item: any) => {
  //   let regexp = new RegExp(`#${item.ctlCode}#`, 'g');
  //   // currTemplate.value = currTemplate.value.replace(regexp, `#${item.cnName}#`);
  //   currTemplate.value = currTemplate.value.replace(regexp, `#${item.cnName}#`);
  // });
};

// 保存
const handleOk = () => {
  modalVisible.value = false;
  emit('intershipProofChange', formData);
};

// 取消
const handleCancel = () => {
  modalVisible.value = false;
};
</script>

<style scoped lang="less">
.content {
  .dept {
    :deep(.arco-form-item-content-wrapper) {
      width: 200%;
    }
  }
}
</style>
